<!--
 * @Author      : ZhouQiJun
 * @Date        : 2025-07-25 09:29:31
 * @LastEditors : ZhouQiJun
 * @LastEditTime: 2025-08-10 18:08:48
 * @Description : 关于博主，前端程序员，最近专注于 webGIS 开发
 * @加微信         : MasonChou123，进技术交流群
-->
<script setup lang="ts">
import { watch } from 'vue'

import { useMap } from 'ol-vue-hooks'

import { baseLayers, guiYang } from './testData'

const { setTarget, gis, inited, dispose, disposed } = useMap(
  {
    center: guiYang as [number, number],
    //地图初始显示级别
    zoom: 10,
    projection: 'EPSG:4326',
    // minZoom: 1,
    // maxZoom: 20,
  },
  baseLayers[0],
  'testUseMap',
)

function initMap() {
  setTarget('TheUseMap')
}

watch(gis, (m) => {
  console.log({ m })
})
</script>

<template>
  <div>
    <div class="TheUseMap" id="TheUseMap" :ref="setTarget"></div>
    <div>
      useMap 自动管理地图销毁，用法更加简单。
      <p>初始化完成：{{ inited }} 销毁：{{ disposed }}</p>
      <button @click="dispose" :disabled="!inited">销毁地图</button>
      <button @click="initMap" :disabled="inited">手动初始化</button>
    </div>
  </div>
</template>

<style lang="scss">
.TheUseMap {
  width: 400px;
  height: 400px;
  background-color: lightgray;
}
</style>
